In [1]:

from ipywidgets import *

1. VBox(HBox)

In [2]:

VBox([HBox([VBox([Dropdown(description='Choice', options=['foo', 'bar']),
                  ColorPicker(description='Color'),
                  HBox([Button(), Button()])]),
            Textarea(value="Lorem ipsum dolor sit amet, consectetur adipiscing elit,"
"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris "
"nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in "
"reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla "
"pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa "
"qui officia deserunt mollit anim id est laborum.")]),
      HBox([Text(), Checkbox(description='Check box')]),
      IntSlider(),
      Controller()], background_color='#EEE')

2. HBox(VBox)

In [3]:

HBox([VBox([Button(description='Press'), Dropdown(options=['a', 'b']), Button(description='Button')]),
      VBox([Button(), Checkbox(), IntText()]),
      VBox([Button(), IntSlider(), Button()])], background_color='#EEE')

3. VBox(HBox) width sliders, range sliders and progress bars

In [4]:

VBox([HBox([Button(), FloatRangeSlider(), Text(), Button()]),
      HBox([Button(), FloatText(), Button(description='Button'),
            FloatProgress(value=40), Checkbox(description='Check')]),
      HBox([ToggleButton(), IntSlider(description='Foobar'),
            Dropdown(options=['foo', 'bar']), Valid()]),
     ])

4. Dropdown resize

In [5]:

dd = Dropdown(description='Foobar', options=['foo', 'bar'])
dd

In [6]:

dd.height = '50px'
dd.width = '148px'

In [7]:

cp = ColorPicker(description='foobar')

5. Colorpicker alignment, concise and long version

In [8]:

VBox([HBox([Dropdown(width='148px', options=['foo', 'bar']),
            Button(description='Button')]), cp, HBox([Button(), Button()])])

In [9]:

cp.concise = True

In [10]:

cp.concise = False

In [11]:

cp2 = ColorPicker()

In [12]:

VBox([HBox([Button(), Button()]), cp2])

In [13]:

cp2.concise = True

In [14]:

cp2.concise = False

6. Vertical slider and progress bar alignment and resize

In [15]:

HBox([IntSlider(description='Slider', orientation='vertical', height='200px'),
      FloatProgress(description='Progress', value=50, orientation='vertical', height='200px')])

In [16]:

HBox([IntSlider(description='Slider', orientation='vertical'),
      FloatProgress(description='Progress', value=50, orientation='vertical')])

7. Tabs

In [17]:

t = Tab(children=[FloatText(), IntSlider()], _titles={0: 'Text', 1: 'Slider'})
t

In [18]:

t.selected_index = 1

In [ ]: